
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>An element that disappears on click</title>
  <style>
#log {
  position: absolute;
  top: 120px;
}
  </style>
</head>
<body id="body">
  <div style="visibility: hidden;">
    <span>
      <input id="unclickable" />
      <input type="file" id="unclickable_file" />
    </span>
  </div>
  <div id="log">
    <p>Log:<p>
  </div>
<script>
var byId = document.getElementById.bind(document);

var log = byId("log");

function handler(ev) {
  log.innerHTML += "<p></p>";
  log.lastElementChild.textContent = ev.type + " in " + ev.target.id + " (handled by " + ev.currentTarget.id + ")\n";
}

var body = document.body;

var types = ["keypress", "keydown", "keyup"];
for (var i = 0, type; (type = types[i]); ++i) {
  body.addEventListener(type, handler);
}
</script>
</body>
</html>
